<template>
  <n-space>
    <n-button @click="()=> {toggleGraph('1')}">graph-1</n-button>
    <n-button @click="()=> {toggleGraph('2')}">graph-2</n-button>
    <n-button @click="()=> {toggleGraph('3')}">graph-3</n-button>
  </n-space>
  <div style="width: 2000px; height: 1000px">
    <Transition>
      <KeepAlive>
        <Component
          :is="contenterComponent"
          :key="currentMetaData?.id"
          :dataId="currentMetaData?.id"
        ></Component>
      </KeepAlive>
  </Transition>
    <!-- <Grapher /> -->
  </div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import Grapher from './components/Grapher.vue'
import {NSpace , NButton} from 'naive-ui'
const currentMetaData = ref<{id: string}>({id: '1'});

const contenterComponent = computed(() => Grapher );

function toggleGraph(id: string){
  if(currentMetaData.value.id !== id){
    currentMetaData.value = {id}
  }
}
</script>
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.v-enter-active,
.v-leave-active {
  transition: opacity 5ms ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
